<template>
    <el-container class="homeContainer">
        <el-header class="Homehead">
            <div class="head">
                <img src="../../assets/img/logo.png" alt="">
                <span>机房排课管理系统</span>
            </div>
            <el-dropdown>
                <i class="el-icon-user"></i>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item><i class="el-icon-s-home">退出登录</i></el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </el-header>
        <el-container>
            <el-aside :width="loggle ? '60px' : '290px'">
                <div class="asidControl" @click="asidControl">|||</div>
                <el-menu :unique-opened="true" :collapse="loggle" :router="true">
                    <el-submenu :index="item.id + ''"  v-for="item in menuList" :key="item.id">
                        <template slot="title"><i class="el-icon-message"></i><span>{{ item.title }}</span></template>
                        <el-menu-item :index="it.path + ''" v-for="it in item.List" :key="it.id">
                            <template slot="title"><i class="el-icon-message"></i><span>{{ it.title }}</span></template>
                        </el-menu-item>
                    </el-submenu>
                </el-menu>
            </el-aside>
            <el-main>
                <router-view></router-view>
            </el-main>
        </el-container>
    </el-container>
</template>

<script>
export default {
  data () {
    return {
      menuList: [
        { id: 100, path: '/add', title: '机房管理', List: [{ id: 101, path: '/classroom', title: '机房设置' }] },
        { id: 400, path: '/course', title: '数据管理', List: [{ id: 101, path: '/upload', title: '数据导入' }, { id: 102, path: '/usermanage', title: '用户管理' }, { id: 103, path: '/coursemanage', title: '课程管理' }] },
        { id: 200, path: '/select', title: '排课管理', List: [{ id: 201, path: '/manageselect', title: '课程查看' }, { id: 202, path: '/freeclassroom', title: '空闲教室查询' }, { id: 203, path: '/changteach', title: '课程修改' }] },
        { id: 300, path: '/personal', title: '我的', List: [{ id: 301, path: '/personal', title: '个人信息管理' }] }
      ],
      loggle: false
    }
  },
  created () {
    //  this.getMenuList()
    // this.$router.push('/personalmain')
    this.$router.push('/managemain')
  },
  methods: {
    logout () {
      // window.sessionStorage.clear()
      this.$router.push('/login')
    },
    async getMenuList () {
      const { data: res } = await this.$http.post('menus')
      if (res.status !== 200) return this.$message.error('获取菜单列表失败')
      this.menuList = res.menus
    },
    asidControl () {
      this.loggle = !this.loggle
    }
  }
}
</script>

<style>
.span{
  font-size: 20px;
}
</style>

<style lang="less" scoped>
.homeContainer {
    height: 100%;
}
.el-header {
    background-color: #B3C0D1;
    display: flex;
    justify-content: space-between;
    padding-left: 0%;
    color: #fff;
    font-size: 20px;
    >div {
        display: flex;
        align-items: center;
        span {
            margin-left: 14px;
            width: 216px;
            font-size:20px;
        }
    }
    .el-button{
      height: 30px;
      text-align: center;
      font-size: 20px;
      align-items: center;
    }
  }
.head img{
    height: 60px;
    width: 60px;
}
.el-aside {
    background-color: #D3DCE6;
    .el-menu {
        border-right: none;
    }
  }
.el-main {
    background-color: #E9EEF3;
  }
.el-button{
    display: flex;
    margin-top: 10px;
    font-size: 15px;
    justify-content: center;
    text-align: center;
    height: 60%;
}
.asidControl{
    background-color: #4A5064;
    height:30px;
    font-size: 20px;
    line-height: 24px;
    color: #fff;
    text-align: center;
    letter-spacing: 0.2em;
    cursor: pointer;
}
.el-submenu {
    span {
      font-size: 20px;
    }
}
.el-menu-item {
    span{
        font-size: 15px;
    }
}
.el-dropdown {
  font-size: 20px;
}
</style>
